<template>
  <view class="container">
    <!-- 顶部切换标签 -->
    <view class="tab-bar">
      <view
        :class="{ 'tab-item': true, 'active': currentTopTab === 0 }"
        @click="switchTopTab(0)"
      >
        购物商城
      </view>
      <view style="width: 4rpx;height: 45rpx;background-color: #999;"></view>
      <view
        :class="{ 'tab-item': true, 'active': currentTopTab === 1 }"
        @click="switchTopTab(1)"
      >
        我的订单
      </view>
    </view>

    <!-- 根据当前选中的顶部标签显示不同内容 -->
    <view v-if="currentTopTab === 0" class="content">
      <!-- 商城商品列表 -->
      <view class="product-list">
        <view class="product-item" v-for="(product, index) in products" :key="index">
          <!-- 商品图片 -->
          <image :src="product.imageUrl" mode="aspectFit"></image>
          <!-- 商品名称 -->
          <text class="product-name">{{ product.name }}</text>
          <!-- 商品积分和库存 -->
          <view class="product-info">
            <text class="product-points">{{ product.points }}积分</text>
            <text class="product-stock">库存: {{ product.stock }}</text>
          </view>
        </view>
      </view>
    </view>
    <view v-if="currentTopTab === 1" class="content">
      <!-- 订单状态切换标签 -->
      <view class="order-status-tabs">
        <view
          :class="{ 'tab': true, 'active': currentOrderStatus === 'all' }"
          @click="filterOrders('all')"
        >
          全部
        </view>
        <view
          :class="{ 'tab': true, 'active': currentOrderStatus === 'pending_delivery' }"
          @click="filterOrders('pending_delivery')"
        >
          待发货
        </view>
        <view
          :class="{ 'tab': true, 'active': currentOrderStatus === 'pending_receipt' }"
          @click="filterOrders('pending_receipt')"
        >
          待收货
        </view>
        <view
          :class="{ 'tab': true, 'active': currentOrderStatus === 'completed' }"
          @click="filterOrders('completed')"
        >
          已完成
        </view>
      </view>

      <!-- 订单列表 -->
      <view v-for="(order, index) in filteredOrders" :key="index" class="order-item">
        <view style="border-bottom: 1rpx solid #999;padding:30rpx">
          <view style="color:#999 ;">订单编号:{{ order.orderNumber }}</view>
          <view style="display: flex;flex-wrap:nowrap;margin-top: 20rpx;">
            <image src="/static/bgImg.png" style="width: 100rpx;height: 100rpx;"></image>
            <view style="padding: 20rpx;">
              <view style="">
                {{ order.productName }}
              </view>
              <view style="color:#999 ;font-size: 20rpx;">
                {{ order.orderTime }}
              </view>
            </view>
            <view style="margin-left: auto;">
              <view style="color: blue;">{{ order.status }}</view>
              <view style="color:#999 ;font-size: 25rpx;">{{ order.points }}积分</view>
              <view style="color:#999 ;font-size: 25rpx;padding-left: 50rpx;">x{{ order.quantity }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <CustomTabBar :currentTab="currentTab" @tabChange="handleTabChange" />
  </view>
</template>

<script>
import CustomTabBar from '@/uni_modules/jorbin-DigHoleNavigationBar/components/CustomTabBar/CustomTabBar.vue';

export default {
  components: {
    CustomTabBar
  },
  data() {
    return {
      currentTab: 0, // 底部自定义 tabBar 的当前选中项
      currentTopTab: 0, // 顶部切换标签的当前选中项
      products: [
        {
          imageUrl: 'https://example.com/laptop.jpg', // 替换为实际图片链接
          name: '免费洗车',
          points: 399,
          stock: 10
        },
        {
          imageUrl: 'https://example.com/schoolbag.jpg', // 替换为实际图片链接
          name: '玻璃换新',
          points: 399,
          stock: 10
        },
        {
          imageUrl: 'https://example.com/shoes.jpg', // 替换为实际图片链接
          name: '轮胎换新',
          points: 399,
          stock: 10
        },
        {
          imageUrl: 'https://example.com/gift-pack.jpg', // 替换为实际图片链接
          name: '优惠卷',
          points: 399,
          stock: 10
        }
      ],
      orders: [
        {
          orderNumber: 483949,
          productName: '免费洗车',
          orderTime: '2023-12-23 12:00',
          status: '待发货',
          points: 2000,
          quantity: 1
        },
        {
          orderNumber: 483949,
          productName: '免费换玻璃',
          orderTime: '2023-12-23 12:00',
          status: '已完成',
          points: 2000,
          quantity: 1
        },
        {
          orderNumber: 483949,
          productName: '免费换轮胎',
          orderTime: '2023-12-23 12:00',
          status: '待收货',
          points: 2000,
          quantity: 1
        }
      ],
      currentOrderStatus: 'all' // 当前选中的订单状态筛选条件
    };
  },
  computed: {
    filteredOrders() {
      if (this.currentOrderStatus === 'all') {
        return this.orders;
      } else if (this.currentOrderStatus === 'pending_delivery') {
        return this.orders.filter(order => order.status === '待发货');
      } else if (this.currentOrderStatus === 'pending_receipt') {
        return this.orders.filter(order => order.status === '待收货');
      } else if (this.currentOrderStatus === 'completed') {
        return this.orders.filter(order => order.status === '已完成');
      }
    }
  },
  methods: {
    handleTabChange(index) {
      this.currentTab = index;
    },
    switchTopTab(index) {
      this.currentTopTab = index;
    },
    filterOrders(status) {
      this.currentOrderStatus = status;
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: white;
}

.tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px 0; /* 上下间距 */
  border-bottom: 1px solid #ccc;
}

.tab-item {
  color: #999; /* 默认灰色 */
  font-size: 18px;
  /* cursor: pointer; */
}

.active {
  color: #007aff; /* 点击后蓝色 */
  background-color: transparent;
}

.content {
  flex: 1;
  padding: 20px;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.product-item {
  width: calc(50% - 10px); /* 每行显示两个商品，减去间距 */
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.product-item image {
  width: 100%;
  height: auto;
}

.product-name {
  display: block;
  padding: 10px;
  text-align: center;
}

.product-info {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.product-points {
  color: red;
}

.product-stock {
  color: #999;
}

.order-status-tabs {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.tab {
  color: #999;
  font-size: 16px;
 }
.tab.active {
  color: #007aff;
}

.order-item {
  margin-bottom: 20px;
}
</style>